<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../gulimall/search/css/index.css">
    <link rel="stylesheet" type="text/css" href="../gulimall/search/font/iconfont.css">
    <script src="../gulimall/search/js/jquery-3.2.1.min.js"></script>
    <script src="../gulimall/search/js/jquery-1.12.4.js"></script>
    <title>检索服务</title>
  </head>
  <body>

    <!--头部-->
    <div class="header_head">
      <div class="header_head_box">
        <b class="header_head_p">
          <div style="overflow: hidden">
            <a href="http://localhost/shop-vue/" class="header_head_p_a1" style="width:73px;">
              谷粒商城首页
            </a>
            <a href="#" class="header_head_p_a">
              <img src="../gulimall/search/img/img_05.png" style="border-radius: 50%;"/>
              无锡</a>
          </div>
          <div class="header_head_p_cs">
            <a href="#" style="background: #C81623;color: #fff;">北京</a>
            <a href="#">上海</a>
            <a href="#">天津</a>
            <a href="#">重庆</a>
            <a href="#">河北</a>
            <a href="#">山西</a>
            <a href="#">河南</a>
            <a href="#">辽宁</a>
            <a href="#">吉林</a>
            <a href="#">黑龙江</a>
            <a href="#">内蒙古</a>
            <a href="#">江苏</a>
            <a href="#">山东</a>
            <a href="#">安徽</a>
            <a href="#">浙江</a>
            <a href="#">福建</a>
            <a href="#">湖北</a>
            <a href="#">湖南</a>
            <a href="#">广东</a>
            <a href="#">广西</a>
            <a href="#">江西</a>
            <a href="#">四川</a>
            <a href="#">海南</a>
            <a href="#">贵州</a>
            <a href="#">云南</a>
            <a href="#">西藏</a>
            <a href="#">陕西</a>
            <a href="#">甘肃</a>
            <a href="#">青海</a>
            <a href="#">宁夏</a>
            <a href="#">新疆</a>
            <a href="#">港澳</a>
            <a href="#">台湾</a>
            <a href="#">钓鱼岛</a>
            <a href="#">海外</a>
          </div>
        </b>
        <ul>
          <li>
            <a th:if="${session.loginUser == null}" href="http://localhost/auth/login.html" class="li_2">您好，请登录</a>
            <a th:if="${session.loginUser != null}">欢迎您, [[${session.loginUser.nickname}]]</a>
          </li>
          <li>
            <a th:if="${session.loginUser == null}" href="http://localhost/auth/reg.html" style="color: red;">免费注册</a>
          </li>
          <span>|</span>
          <li>
            <a href="#">我的订单</a>
          </li>
          <span>|</span>
          <li class="header_wdjd" style="width:80px;">
            <a href="#">我的谷粒商城</a>
            <img src="../gulimall/search/image/down-@1x.png"/>
            <!--<b class="glyphicon glyphicon-menu-down"></b>-->
            <div class="header_wdjd_txt">
              <ul>
                <li>
                  <a href="#">待处理订单</a>
                </li>
                <li>
                  <a href="#">消息</a>
                </li>
                <li>
                  <a href="#">返修退换货</a>
                </li>
                <li>
                  <a href="#">我的回答</a>
                </li>
                <li>
                  <a href="#">降价商品</a>
                </li>
                <li>
                  <a href="#">我的关注</a>
                </li>
              </ul>
              <ul>
                <li>
                  <a href="#">我的京豆</a>
                </li>
                <li>
                  <a href="#">我的优惠券</a>
                </li>
                <li>
                  <a href="#">我的白条</a>
                </li>
                <li>
                  <a href="#">我的理财</a>
                </li>
              </ul>
            </div>
          </li>
          <span>|</span>
          <li>
            <a href="#">谷粒商城会员</a>
          </li>
          <span>|</span>
          <li>
            <a href="#">企业采购</a>
          </li>
          <span>|</span>
          <li class="header_wdjd1">
            <a href="#">客户服务</a>
            <img src="../gulimall/search/image/down-@1x.png"/>
            <!--<b class="glyphicon glyphicon-menu-down"></b>-->
            <div class="header_wdjd_txt">
              <ul>
                <p style="width:100%;">客户</p>
                <li>
                  <a href="#">帮助中心</a>
                </li>
                <li>
                  <a href="#">售后服务</a>
                </li>
                <li>
                  <a href="#">在线客服</a>
                </li>
                <li>
                  <a href="#">意见建议</a>
                </li>
                <li>
                  <a href="#">电话客服</a>
                </li>
                <li>
                  <a href="#">客服邮箱</a>
                </li>
                <li>
                  <a href="#">金融资讯</a>
                </li>
                <li>
                  <a href="#">售全球客服</a>
                </li>
              </ul>
              <ul>
                <p style="width:100%;">商户</p>
                <li>
                  <a href="#">合作招商</a>
                </li>
                <li>
                  <a href="#">学习中心</a>
                </li>
                <li>
                  <a href="#">商家后台</a>
                </li>
                <li>
                  <a href="#">京麦工作台</a>
                </li>
                <li>
                  <a href="#">商家帮助</a>
                </li>
                <li>
                  <a href="#">规则平台</a>
                </li>
              </ul>
            </div>
          </li>
          <span>|</span>
          <li class="header_wzdh">
            <a href="#">网站导航</a>
            <img src="../gulimall/search/image/down-@1x.png"/>
            <!--<b class="glyphicon glyphicon-menu-down"></b>-->
            <div class="header_wzdh_txt">
              <ul style="width: 25%;">
                <p style="width:100%;">特色主题</p>
                <li>
                  <a href="#">谷粒商城试用</a>
                </li>
                <li>
                  <a href="#">谷粒商城金融</a>
                </li>
                <li>
                  <a href="#">全球售</a>
                </li>
                <li>
                  <a href="#">国际站</a>
                </li>
                <li>
                  <a href="#">谷粒商城会员</a>
                </li>
                <li>
                  <a href="#">谷粒商城预售</a>
                </li>
                <li>
                  <a href="#">买什么</a>
                </li>
                <li>
                  <a href="#">俄语站</a>
                </li>
                <li>
                  <a href="#">装机大师</a>
                </li>
                <li>
                  <a href="#">0元评测</a>
                </li>
                <li>
                  <a href="#">定期送</a>
                </li>
                <li>
                  <a href="#">港澳售</a>
                </li>
                <li>
                  <a href="#">优惠券</a>
                </li>
                <li>
                  <a href="#">秒杀</a>
                </li>
                <li>
                  <a href="#">闪购</a>
                </li>
                <li>
                  <a href="#">印尼站</a>
                </li>
                <li>
                  <a href="#">谷粒商城金融科技</a>
                </li>
                <li>
                  <a href="#">In货推荐</a>
                </li>
                <li>
                  <a href="#">陪伴计划</a>
                </li>
                <li>
                  <a href="#">出海招商</a>
                </li>
              </ul>
              <ul style="width: 20%;">
                <p style="width:100%;">行业频道</p>
                <li>
                  <a href="#">手机</a>
                </li>
                <li>
                  <a href="#">智能数码</a>
                </li>
                <li>
                  <a href="#">玩3c</a>
                </li>
                <li>
                  <a href="#">电脑办公</a>
                </li>
                <li>
                  <a href="#">家用电器</a>
                </li>
                <li>
                  <a href="#">谷粒商城智能</a>
                </li>
                <li>
                  <a href="#">服装城</a>
                </li>
                <li>
                  <a href="#">美妆馆</a>
                </li>
                <li>
                  <a href="#">家装城</a>
                </li>
                <li>
                  <a href="#">母婴</a>
                </li>
                <li>
                  <a href="#">食品</a>
                </li>
                <li>
                  <a href="#">运动户外</a>
                </li>
                <li>
                  <a href="#">农资频道</a>
                </li>
                <li>
                  <a href="#">整车</a>
                </li>
                <li>
                  <a href="#">图书</a>
                </li>
              </ul>
              <ul style="width: 21%;">
                <p style="width:100%;">生活服务</p>
                <li>
                  <a href="#">白条</a>
                </li>
                <li>
                  <a href="#">谷粒商城金融App</a>
                </li>
                <li>
                  <a href="#">谷粒商城小金库</a>
                </li>
                <li>
                  <a href="#">理财</a>
                </li>
                <li>
                  <a href="#">智能家电</a>
                </li>
                <li>
                  <a href="#">话费</a>
                </li>
                <li>
                  <a href="#">水电煤</a>
                </li>
                <li>
                  <a href="#">彩票</a>
                </li>
                <li>
                  <a href="#">旅行</a>
                </li>
                <li>
                  <a href="#">机票酒店</a>
                </li>
                <li>
                  <a href="#">电影票</a>
                </li>
                <li>
                  <a href="#">谷粒商城到家</a>
                </li>
                <li>
                  <a href="#">谷粒商城众测</a>
                </li>
                <li>
                  <a href="#">游戏</a>
                </li>
              </ul>
              <ul style="width: 23%; border-right: 0;">
                <p style="width:100%;">更多精选</p>
                <li>
                  <a href="#">合作招商</a>
                </li>
                <li>
                  <a href="#">谷粒商城通信</a>
                </li>
                <li>
                  <a href="#">谷粒商城E卡</a>
                </li>
                <li>
                  <a href="#">企业采购</a>
                </li>
                <li>
                  <a href="#">服务市场</a>
                </li>
                <li>
                  <a href="#">办公生活馆</a>
                </li>
                <li>
                  <a href="#">乡村招募</a>
                </li>
                <li>
                  <a href="#">校园加盟</a>
                </li>
                <li>
                  <a href="#">京友帮</a>
                </li>
                <li>
                  <a href="#">谷粒商城社区</a>
                </li>
                <li>
                  <a href="#">智能社区</a>
                </li>
                <li>
                  <a href="#">游戏社区</a>
                </li>
                <li>
                  <a href="#">知识产权维权</a>
                </li>
              </ul>
            </div>
          </li>
          <span>|</span>
          <li class="header_sjjd">
            <a href="#">手机谷粒商城</a>
            <div class="header_sjjd_div">
              <img src="../gulimall/search/img/01.png"/>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!--搜索导航-->
    <div class="header_sous">
      <div class="logo">
        <a href="http://localhost/shop-vue/"><img src="../gulimall/search/image/logo1.jpg" alt=""></a>
      </div>
      <div class="header_form">
        <input id="keyword_input" type="text" placeholder="手机" th:value="${param.keyword}"/>
        <a href="javascript:searchByKeyword()">搜索</a>
      </div>
      <div class="header_ico">
        <div class="header_gw">
          <span><a href="http://localhost/cart/cart.html">我的购物车</a></span>
          <img src="../gulimall/search/image/settleup-@1x.png"/>
          <span>0</span>
        </div>
        <div class="header_ko">
          <p>购物车中还没有商品，赶紧选购吧！</p>
        </div>
      </div>
      <div class="header_form_nav">
        <ul>
          <li>
            <a href="#">谷粒商城之家</a>
          </li>
          <li>
            <a href="#">谷粒商城专卖店</a>
          </li>
          <li>
            <a href="#">平板</a>
          </li>
          <li>
            <a href="#">电脑</a>
          </li>
          <li>
            <a href="#">ipad</a>
          </li>
        </ul>
      </div>
      <nav>
        <ul>
          <li class="nav_li1">
            <a href="#">全部商品分类</a>
          </li>
          <li class="nav_li">
            <a href="#">服装城</a>
          </li>
          <li class="nav_li">
            <a href="#">没装馆</a>
          </li>
          <li class="nav_li">
            <a href="#">超市</a>
          </li>
          <li class="nav_li">
            <a href="#">生鲜</a>
          </li>
        </ul>
        <div class="spacer">|</div>
        <ul>
          <li class="nav_li">
            <a href="#">全球购</a>
          </li>
          <li class="nav_li">
            <a href="#">闪购</a>
          </li>
          <li class="nav_li">
            <a href="#">拍卖</a>
          </li>
        </ul>
        <div class="spacer">|</div>
        <ul>
          <li class="nav_li">
            <a href="#">金融</a>
          </li>
        </ul>

      </nav>
      <div class="header_main_left">
        <ul>
          <li>
            <a href="#" class="header_main_left_a"><b>家用电器</b></a>
          </li>
          <li class="header_li2">
            <a href="#" class="header_main_left_a"><b>手机</b> / <b>运营商</b> / <b>数码</b></a>
            <div class="header_main_left_main">
              <div class="header_sj">
                <a href="#" class="header_sj_a">玩3c</a>
                <a href="#" class="header_sj_a">手机频道</a>
                <a href="#" class="header_sj_a">网上营业厅</a>
                <a href="#" class="header_sj_a">配件选购中心</a>
                <a href="#" class="header_sj_a">企业购</a>
                <a href="#" class="header_sj_a">以旧换新</a>
              </div>
              <ol class="header_ol">
                <a href="#" style="color: #111;" class="aaa">手机通讯 ></a>
                <li>
                  <a href="#" style="color: #999;">手机</a>
                  <a href="#" style="color: #999;">对讲机</a>
                  <a href="#" style="color: #999;">手机维修</a>
                  <a href="#" style="color: #999;">以旧换新</a>
                </li>
                <a href="#" style="color: #111;" class="aaa">运营商 ></a>
                <li>
                  <a href="#" style="color: #999;">合约机</a>
                  <a href="#" style="color: #999;">固话宽带</a>
                  <a href="#" style="color: #999;">办套餐</a>
                  <a href="#" style="color: #999;">从话费/流量</a>
                  <a href="#" style="color: #999;">中国电信</a>
                  <a href="#" style="color: #999;">中国移动</a>
                  <a href="#" style="color: #999;">中国联通</a>
                  <a href="#" style="color: #999;">谷粒商城通信</a>
                  <a href="#" style="color: #999;">170选号</a>
                </li>
                <a href="#" style="color: #111;" class="aaa">手机配件 ></a>
                <li style="height: 60px;">

                  <a href="#" style="color: #999;">手机壳</a>
                  <a href="#" style="color: #999;">贴膜</a>
                  <a href="#" style="color: #999;">手机储存卡</a>
                  <a href="#" style="color: #999;">数据线</a>
                  <a href="#" style="color: #999;">存电器</a>
                  <a href="#" style="color: #999;">手机耳机</a>
                  <a href="#" style="color: #999;">创业配件</a>
                  <a href="#" style="color: #999;">手机饰品</a>
                  <a href="#" style="color: #999;">手机电池</a>
                  <a href="#" style="color: #999;">苹果周边</a>
                  <a href="#" style="color: #999;">移动电源</a>
                  <a href="#" style="color: #999;">蓝牙耳机</a>
                  <a href="#" style="color: #999;">手机支架</a>
                  <a href="#" style="color: #999;">车载配件</a>
                  <a href="#" style="color: #999;">拍照配件</a>

                </li>
                <a href="#" style="color: #111;" class="aaa">摄影摄像 ></a>
                <li style="height: 60px;">

                  <a href="#" style="color: #999;">数码相机</a>
                  <a href="#" style="color: #999;">单电/微单相机</a>
                  <a href="#" style="color: #999;">单反相机</a>
                  <a href="#" style="color: #999;">拍立得</a>
                  <a href="#" style="color: #999;">运动相机</a>
                  <a href="#" style="color: #999;">摄像机</a>
                  <a href="#" style="color: #999;">镜头</a>
                  <a href="#" style="color: #999;">户外器材</a>
                  <a href="#" style="color: #999;">影棚器材</a>
                  <a href="#" style="color: #999;">冲印服务</a>
                  <a href="#" style="color: #999;">数码相框</a>
                </li>
                <a href="#" style="color: #111;" class="aaa">数码配件 ></a>
                <li style="height: 60px;">

                  <a href="#" style="color: #999;">三脚架/云台</a>
                  <a href="#" style="color: #999;">相机包</a>
                  <a href="#" style="color: #999;">滤镜</a>
                  <a href="#" style="color: #999;">散光灯/手柄</a>
                  <a href="#" style="color: #999;">相机清洁</a>
                  <a href="#" style="color: #999;">机身附件</a>
                  <a href="#" style="color: #999;">镜头附件</a>
                  <a href="#" style="color: #999;">读卡器</a>
                  <a href="#" style="color: #999;">支架</a>
                  <a href="#" style="color: #999;">电池/存电器</a>

                </li>
                <a href="#" style="color: #111;" class="aaa">影音娱乐 ></a>
                <li>

                  <a href="#" style="color: #999;">耳机/耳麦</a>
                  <a href="#" style="color: #999;">音箱/音响</a>
                  <a href="#" style="color: #999;">智能音箱</a>
                  <a href="#" style="color: #999;">便携/无线音箱</a>
                  <a href="#" style="color: #999;">收音机</a>
                  <a href="#" style="color: #999;">麦克风</a>
                  <a href="#" style="color: #999;">MP3/MP4</a>
                  <a href="#" style="color: #999;">专业音频</a>
                </li>
                <a href="#" style="color: #111;" class="aaa">智能设备 ></a>
                <li style="height: 60px;">

                  <a href="#" style="color: #999;">智能手环</a>
                  <a href="#" style="color: #999;">智能手表</a>
                  <a href="#" style="color: #999;">智能眼镜</a>
                  <a href="#" style="color: #999;">智能机器人</a>
                  <a href="#" style="color: #999;">运动跟踪器</a>
                  <a href="#" style="color: #999;">健康监测</a>
                  <a href="#" style="color: #999;">智能配饰</a>
                  <a href="#" style="color: #999;">智能家居</a>
                  <a href="#" style="color: #999;">体感车</a>
                  <a href="#" style="color: #999;">无人机</a>
                  <a href="#" style="color: #999;">其他配件</a>
                </li>
                <a href="#" style="color: #111;" class="aaa">电子教育 ></a>
                <li>
                  <a href="#" style="color: #999;">学生平板</a>
                  <a href="#" style="color: #999;">点读机</a>
                  <a href="#" style="color: #999;">早教益智</a>
                  <a href="#" style="color: #999;">录音笔</a>
                  <a href="#" style="color: #999;">电纸书</a>
                  <a href="#" style="color: #999;">电子词典</a>
                  <a href="#" style="color: #999;">复读机</a>
                </li>
              </ol>
              <div class="header_r">
                <div class="header_r_tu">
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                  <a href="#"><img src="../gulimall/search/img/56b2f385n8e4eb051.jpg"/></a>
                </div>
                <div class="header_r_tu1">
                  <a href="#"><img src="../gulimall/search/img/JD_ash7 - 副本.png"/></a>
                  <a href="#"><img src="../gulimall/search/img/JD_ash6.png"/></a>
                </div>
              </div>
            </div>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>电脑</b> / <b>办公</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>家居</b> / <b>家具</b> / <b>家装</b> / <b>厨具</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>男装</b> / <b>女装</b> / <b>童装</b> / <b>内衣</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>美妆个护 </b>/ <b>宠物</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>女鞋</b> / <b>箱包</b> / <b>钟表</b> / <b>珠宝</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>男鞋</b> / <b>运动</b> / <b>户外</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>汽车</b> / <b>汽车用品</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>母婴</b> / <b>玩具乐器</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>食品</b> / <b>酒类</b> / <b>生鲜</b> / <b>特产</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>礼品鲜花</b> / <b>农资绿植</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>医药保健</b> / <b>计生情趣</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>图书</b> / <b>音箱</b>/ <b>电子书</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>机票</b> / <b>酒店</b> / <b>旅游</b> / <b>生活</b></a>
          </li>
          <li>
            <a href="#" class="header_main_left_a"><b>理财</b> / <b>众筹</b> / <b>白条</b> / <b>保险</b></a>
          </li>
        </ul>

      </div>
    </div>

    <hr style="border: 1px solid #ff0000;margin-top: -7px;">

    <!--热卖促销-->
    <div class="JD_temai">
      <div class="JD_main">
        <div class="JD_left">
          <div class="hd">
            热卖推荐
          </div>
          <div class="bd mc">
            <ul class="mc">
              <li>
                <a href="#" class="mc_a"><img src="../gulimall/search/img/5a28b5a1n8a5c095f.jpg"
                                              alt=""></a>
                <div class="mc_div">
                  <a href="#" class="mc_div_a1">
                    <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                  </a>
                  <p>
                    <strong>
                      <em class="number J-p-5963064">￥2999.00</em>
                    </strong>
                  </p>
                  <a href="#" class="mc_div_a2">立即抢购</a>
                </div>
              </li>
              <li>
                <a href="#" class="mc_a"><img src="../gulimall/search/img/59f5eef1n99542494.jpg"
                                              alt=""></a>
                <div class="mc_div">
                  <a href="#" class="mc_div_a1">
                    <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                  </a>
                  <p>
                    <strong>
                      <em class="number J-p-5963064">￥1699.00</em>
                    </strong>
                  </p>
                  <a href="#" class="mc_div_a2">立即抢购</a>
                </div>
              </li>
              <li style="margin-right: 0">
                <a href="#" class="mc_a"><img src="../gulimall/search/img/59f5eef1n99542494.jpg"
                                              alt=""></a>
                <div class="mc_div">
                  <a href="#" class="mc_div_a1">
                    <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                  </a>
                  <p>
                    <strong>
                      <em class="number J-p-5963064">￥2999.00</em>
                    </strong>
                  </p>
                  <a href="#" class="mc_div_a2">立即抢购</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="JD_right">
          <div class="hd"> 促销活动</div>
          <div class="bd">
            <ul>
              <li> . <a href="#">红米千元全面屏手机上市</a></li>
              <li> . <a href="#">锤子坚果Pro2火爆预约中</a></li>
              <li> . <a href="#">大牌新品 疯狂抢购</a></li>
              <li> . <a href="#">X20 vivo蓝新色上市</a></li>
              <li> . <a href="#">荣耀畅玩7X新品上市</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--商品-->
    <div class="JD_ipone">
      <div class="JD_ipone_bar">
          <!-- 遍历面包屑功能 -->
          <a th:href="${nav.link}" th:each="nav:${result.navs}"><span th:text="${nav.navName}"></span>：<span th:text="${nav.navValue}"></span> x</a>
        </div>
      </div>
    </div>

    <!--商品筛选和排序-->
    <div class="JD_banner w">
      <div class="JD_nav">
        <div class="JD_selector">
          <!--手机商品筛选-->
          <div class="title">
            <h3><b></b><em>商品筛选</em></h3>
            <div class="st-ext">共&nbsp;<span th:text="${result.total}"></span>个商品</div>
          </div>
          <div class="JD_nav_logo" th:with="brandId=${param.brandId}">
            <!--品牌-->
            <div th:if="${#strings.isEmpty(brandId)}" class="JD_nav_wrap">
              <div class="sl_key">
                <span><b>品牌：</b></span>
              </div>
              <div class="sl_value">
                <div class="sl_value_logo">
                  <ul>
                    <li th:each="brand : ${result.brands}">
                      <a href="#"
                         th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.brandId+')'}">
                        <img th:src="${brand.brandImg}" alt="">
                        <div th:text="${brand.brandName}">
                          华为(HUAWEI)
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="sl_ext">
                <a href="#">
                  更多
                  <i style='background: url("image/search.ele.png")no-repeat 3px 7px'></i>
                  <b style='background: url("image/search.ele.png")no-repeat 3px -44px'></b>
                </a>
                <a href="#">
                  多选
                  <i>+</i>
                  <span>+</span>
                </a>
              </div>
            </div>

            <!--分类-->
            <div class="JD_pre">
              <div class="sl_key">
                <span><b>分类：</b></span>
              </div>
              <div class="sl_value">
                <ul>
                  <li th:each="catalog : ${result.catalogs}">
                    <a href="#"
                       th:href="${'javascript:searchProducts(&quot;catalog3Id&quot;,'+catalog.catalogId+')'}"
                       th:text="${catalog.catalogName}">5.56英寸及以上

                    </a>
                  </li>
                </ul>
              </div>
              <div class="sl_ext">
                <a href="#">
                  更多
                  <i style='background: url("image/search.ele.png")no-repeat 3px 7px'></i>
                  <b style='background: url("image/search.ele.png")no-repeat 3px -44px'></b>
                </a>
                <a href="#">
                  多选
                  <i>+</i>
                  <span>+</span>
                </a>
              </div>
            </div>

            <!--其它的所有需要展示的属性-->
            <div class="JD_pre" th:each="attr:${result.attrs}" th:if="${!#lists.contains(result.attrIds, attr.attrId)}">
              <div class="sl_key">
                <span th:text="${attr.attrName}">屏幕尺寸：</span>
              </div>
              <div class="sl_value">
                <ul>
                  <li th:each="attrValue : ${attr.attrValue}">
                    <a href="#"
                       th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot;'+attr.attrId+'_'+attrValue+'&quot;)'}"
                       th:text="${attrValue}">5.56英寸及以上
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="JD_show">
            <a href="#">
                    <span>
                        更多选项（ CPU核数、网络、机身颜色 等）
                    </span>
            </a>
          </div>
        </div>
        <!--排序-->
        <div class="JD_banner_main">
          <!--商品精选-->
          <div class="JD_con_left">
            <div class="JD_con_left_bar">
              <div class="JD_con_one">
                <div class="mt">
                  <h3>商品精选</h3>
                  <span>广告</span>
                </div>
                <div class="mc">
                  <ul>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
                      <a href="#"
                         title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥2999.00</span>
                        </strong>
                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                      </div>
                      <div class="mc_rev">
                        已有
                        <a href="#" class="number">12466</a>
                        人评价
                      </div>
                    </li>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
                      <a href="#"
                         title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥2999.00</span>
                        </strong>
                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                      </div>
                      <div class="mc_rev">
                        已有
                        <a href="#" class="number">12466</a>
                        人评价
                      </div>
                    </li>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/593ba628n8794c6a6.jpg" alt=""></a>
                      <a href="#"
                         title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                        <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥1799.00</span>
                        </strong>
                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                      </div>
                      <div class="mc_rev">
                        已有
                        <a href="#" class="number">15600</a>
                        人评价
                      </div>
                    </li>
                   <!-- <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/5919637an271a1301.jpg" alt=""></a>
                      <a href="#"
                         title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                        <em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥3498.00</span>
                        </strong>
                        <span class="mc-ico" title="购买本商品送赠品">
                                            <i class="goods-icons">赠品</i>
                                        </span>
                      </div>
                      <div class="mc_rev">
                        已有
                        <a href="#" class="number">5369</a>
                        人评价
                      </div>
                    </li>-->
                  </ul>
                </div>
              </div>

<!--              <div class="JD_con_one">
                <div class="mt">
                  <h3>达人选购</h3>
                </div>
                <div class="mc">
                  <ul>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
                      <a href="#">
                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥2999.00</span>
                        </strong>
                      </div>
                    </li>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
                      <a href="#">
                        <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥2999.00</span>
                        </strong>
                      </div>
                    </li>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/593ba628n8794c6a6.jpg" alt=""></a>
                      <a href="#">
                        <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥1799.00</span>
                        </strong>
                      </div>
                    </li>
                    <li>
                      <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                        src="../gulimall/search/img/5919637an271a1301.jpg" alt=""></a>
                      <a href="#">
                        <em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
                      </a>
                      <div class="mc_price">
                        <strong class="price">
                          <span class="J-p-5963064">￥3498.00</span>
                        </strong>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="JD_con_one" style="border:none;">
                <div class="mt">
                  <h3>商品精选</h3>
                  <span>广告</span>
                </div>
                <div class="mc">
                  <ul>
                    <li>
                      <a href="#"><img src="../gulimall/search/img/599a806bn9d829c1c.jpg"
                                       alt=""></a>
                    </li>
                    <li>
                      <a href="#"><img src="../gulimall/search/img/593e4de0n5ff878a4.jpg"
                                       alt=""></a>
                    </li>
                  </ul>
                </div>
              </div>-->

            </div>
          </div>
          <!--综合排序-->
          <div class="JD_con_right">
            <div class="filter">
              <!--综合排序-->
              <div class="filter_top">
                <div class="filter_top_left" th:with="p = ${param.sort}, priceRange = ${param.skuPrice}">
                  <a sort="hotScore"
                     th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc')) ? 'sort_a desc' : 'sort_a'}"
                     th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p,'hotScore')) ?
                                   'color: #fff; border-color: #e4393c; background: #e4393c;':'color: #333; border-color: #ccc; background: #fff;' }">
                    综合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') &&
                    #strings.endsWith(p,'desc')) ?'↑':'↓' }]]</a>
                  <a sort="saleCount"
                     th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc')) ? 'sort_a desc' : 'sort_a'}"
                     th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount')) ?
                                   'color: #fff; border-color: #e4393c; background: #e4393c;':'color: #333; border-color: #ccc; background: #fff;' }">
                    销量[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') &&
                    #strings.endsWith(p,'desc'))?'↑':'↓' }]]</a>
                  <a sort="skuPrice"
                     th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc')) ? 'sort_a desc' : 'sort_a'}"
                     th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice')) ?
                                   'color: #fff; border-color: #e4393c; background: #e4393c;':'color: #333; border-color: #ccc; background: #fff;' }">
                    价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') &&
                    #strings.endsWith(p,'desc'))?'↑':'↓' }]]</a>
                  <a sort="hotScore" class="sort_a">评论分</a>
                  <a sort="hotScore" class="sort_a">上架时间</a>
                  <input id="skuPriceFrom" type="number"
                         th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}"
                         style="width: 100px; margin-left: 30px">
                  -
                  <input id="skuPriceTo" type="number"
                         th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}"
                         style="width: 100px">
                  <button id="skuPriceSearchBtn">确定</button>
                </div>
                <div class="filter_top_right">
                            <span class="fp-text">
                               <b>1</b><em>/</em><i>169</i>
                           </span>
                  <a href="#" class="prev"><</a>
                  <a href="#" class="next"> > </a>
                </div>
              </div>
              <!--收货地址-->
              <div class="filter_bottom">
                <div class="filter_bottom_left">
                  <div class="fs-cell">收货地</div>
                  <div class="dizhi">
                    <div class="dizhi_show">
                      <em>北京朝阳区三环以内</em>
                      <b></b>
                    </div>
                  </div>
                  <div class="dizhi_con">
                    <ul id="tab">
                      <li id="tab1" value="1">北京 <img src="../gulimall/search/image/down-@1x.png" alt=""></li>
                      <li id="tab2" value="2">朝阳 <img src="../gulimall/search/image/down-@1x.png" alt=""></li>
                      <li id="tab3" value="3">三环以内 <img src="../gulimall/search/image/down-@1x.png" alt="">
                      </li>
                    </ul>
                    <div id="container">
                      <div id="content1" style="z-index: 1;">
                        <a href="#">北京</a>
                        <a href="#">上海</a>
                        <a href="#">天津</a>
                        <a href="#">重庆</a>
                        <a href="#">河北</a>
                        <a href="#">山西</a>
                        <a href="#">河南</a>
                        <a href="#">辽宁</a>
                        <a href="#">吉林</a>
                        <a href="#">黑龙江</a>
                        <a href="#">内蒙古</a>
                        <a href="#">江苏</a>
                        <a href="#">山东</a>
                        <a href="#">安徽</a>
                        <a href="#">浙江</a>
                        <a href="#">福建</a>
                        <a href="#">湖北</a>
                        <a href="#">湖南</a>
                        <a href="#">广东</a>
                        <a href="#">广西</a>
                        <a href="#">江西</a>
                        <a href="#">四川</a>
                        <a href="#">海南</a>
                        <a href="#">贵州</a>
                        <a href="#">云南</a>
                        <a href="#">西藏</a>
                        <a href="#">陕西</a>
                        <a href="#">甘肃</a>
                        <a href="#">青海</a>
                        <a href="#">宁夏</a>
                        <a href="#">新疆</a>
                        <a href="#">港澳</a>
                        <a href="#">台湾</a>
                        <a href="#">钓鱼岛</a>
                        <a href="#">海外</a>

                      </div>
                      <div id="content2">
                        <a href="#">朝阳区</a>
                        <a href="#">海淀区</a>
                        <a href="#">西城区</a>
                        <a href="#">东城区</a>
                        <a href="#">大兴区</a>
                        <a href="#">丰台区</a>
                        <a href="#">昌平区</a>
                        <a href="#">顺义区</a>

                      </div>
                      <div id="content3">
                        <a href="#">三环以内</a>
                        <a href="#">管庄</a>
                        <a href="#">北苑</a>
                        <a href="#">定福庄</a>
                        <a href="#">三环到四环之间</a>
                        <a href="#">四环到五环之间</a>
                        <a href="#">五环到六环之间</a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="filter_bottom_right">
                  <ul>
                    <li>
                      <a href="#">
                        <i></i>
                        谷粒商城配送
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i></i>
                        京尊达 </a>
                    </li>
                    <li>
                      <a href="#">
                        <i></i>
                        货到付款
                      </a>
                    </li>
                    <li>
                      <a th:with="check = ${param.hasStock}">
                        <input id="showHasStock" type="checkbox" th:checked="${#strings.equals(check,'1')?true:false}">
                        仅显示有货
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i></i>
                        可配送全球
                      </a>
                    </li>
                  </ul>
                </div>

              </div>
              <!--排序内容，每四个是一组-->
              <div class="rig_tab">
                <div th:each="product : ${result.products}">
                  <div class="ico">
                    <i class="iconfont icon-weiguanzhu"></i>
                    <a href="#">关注</a>
                  </div>
                  <p class="da">
                    <a th:href="|http://localhost/item/${product.skuId}.html|">
                      <img class="dim" th:src="${product.skuImg}">
                    </a>
                  </p>
                  <ul class="tab_im">
                    <li><a href="#" title="黑色">
                      <img th:src="${product.skuImg}"></a></li>
                  </ul>
                  <p class="tab_R">
                    <span th:text="'￥' + ${product.skuPrice}">¥5199.00</span>
                  </p>
                  <p class="tab_JE">
                    <a href="#" th:utext="${product.skuTitle}">
                      Apple iPhone 7 Plus (A1661) 32G 黑色 移动联通电信4G手机
                    </a>
                  </p>
                  <p class="tab_PI">已有<span>11万+</span>热门评价
                    <a href="#">二手有售</a>
                  </p>
                  <p class="tab_CP"><a href="#" title="谷粒商城Apple产品专营店">谷粒商城Apple产品...</a>
                    <a href='#' title="联系供应商进行咨询">
                      <img src="../gulimall/search/img/xcxc.png">
                    </a>
                  </p>
                  <div class="tab_FO">
                    <div class="FO_one">
                      <p>自营
                        <span>谷粒商城自营,品质保证</span>
                      </p>
                      <p>满赠
                        <span>该商品参加满赠活动</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!--分页-->
              <div class="filter_page">
                <div class="page_wrap">
                            <span class="page_span1">
                                <a class="page_a" th:attr="pn=${result.pageNum - 1}" href="#"
                                   th:if="${result.pageNum>1}">
                                    < 上一页
                                </a>
                                <a class="page_a"
                                   th:attr="pn=${navs},style=${navs == result.pageNum?'border: 0;color:#ee2222;background: #fff':''}"
                                   th:each="navs : ${result.pageNavs}">[[${navs}]]</a>
                                <a class="page_a" th:attr="pn=${result.pageNum + 1}"
                                   th:if="${result.pageNum<result.totalPages}">
                                    下一页 >
                                </a>
                            </span>
                  <span class="page_span2">
                                <em>共<b>[[${result.totalPages}]]</b>页&nbsp;&nbsp;到第</em>
                                <input type="number" value="1">
                                <em>页</em>
                                <a class="page_submit">确定</a>
                            </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--&lt;!&ndash;商品精选&ndash;&gt;
    <div class="JD_jx">
      <div class="JD_jx_title">
        <div class="mt">
          <strong class="mt-title">商品精选</strong>
          <img src="../gulimall/search/image/u-ad.gif" alt="">
        </div>
        <div class="mc">
          <ul>
            <li>
              <div class="mc_img">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <img src="../gulimall/search/img/5a25ffc7N98b35d49.jpg" alt="">
                </a>
              </div>
              <div class="mc_name">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
                <span class="mc_ico" title="购买本商品送赠品">赠品</span>
              </div>
              <div class="mc_rev">
                <a href="#">15930</a>
                <span>人好评</span>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <img src="../gulimall/search/img/5a25ffc7N98b35d49.jpg" alt="">
                </a>
              </div>
              <div class="mc_name">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
                <span class="mc_ico" title="购买本商品送赠品">赠品</span>
              </div>
              <div class="mc_rev">
                <a href="#">15930</a>
                <span>人好评</span>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <img src="../gulimall/search/img/5a25ffc7N98b35d49.jpg" alt="">
                </a>
              </div>
              <div class="mc_name">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
                <span class="mc_ico" title="购买本商品送赠品">赠品</span>
              </div>
              <div class="mc_rev">
                <a href="#">15930</a>
                <span>人好评</span>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <img src="../gulimall/search/img/5a25ffc7N98b35d49.jpg" alt="">
                </a>
              </div>
              <div class="mc_name">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
                <span class="mc_ico" title="购买本商品送赠品">赠品</span>
              </div>
              <div class="mc_rev">
                <a href="#">15930</a>
                <span>人好评</span>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <img src="../gulimall/search/img/5a25ffc7N98b35d49.jpg" alt="">
                </a>
              </div>
              <div class="mc_name">
                <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                  <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
                <span class="mc_ico" title="购买本商品送赠品">赠品</span>
              </div>
              <div class="mc_rev">
                <a href="#">15930</a>
                <span>人好评</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    &lt;!&ndash;猜你喜欢&ndash;&gt;
    <div class="JD_cnxh">
      <div class="JD_jx_title">
        <div class="mt">
          <strong class="mt-title">猜你喜欢</strong>
          <a href="#">
            <img src="../gulimall/search/image/update.png" alt="">
            换一批
          </a>
        </div>
        <div class="mc">
          <ul>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/59bf3c47n91d65c73.jpg" alt="">
                </a>
              </div>
              <div class="mc_name">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                </a>
              </div>
              <div class="mc_rev">
                <a href="#">已有80万+人评价</a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
              </div>

            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/5a28b5c6Ndec5088f.jpg" alt=""></a>
              </div>
              <div class="mc_name">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                </a>
              </div>
              <div class="mc_rev">
                <a href="#">已有80万+人评价</a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
              </div>

            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img
                  src="../gulimall/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
              </div>
              <div class="mc_name">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                </a>
              </div>
              <div class="mc_rev">
                <a href="#">已有80万+人评价</a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
              </div>

            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img
                  src="../gulimall/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
              </div>
              <div class="mc_name">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                </a>
              </div>
              <div class="mc_rev">
                <a href="#">已有80万+人评价</a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
              </div>

            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img
                  src="../gulimall/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
              </div>
              <div class="mc_name">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                </a>
              </div>
              <div class="mc_rev">
                <a href="#">已有80万+人评价</a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
              </div>

            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img
                  src="../gulimall/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
              </div>
              <div class="mc_name">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                </a>
              </div>
              <div class="mc_rev">
                <a href="#">已有80万+人评价</a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥1999.00</span>
                </strong>
              </div>

            </li>
          </ul>


        </div>
      </div>
    </div>

    &lt;!&ndash;我的足迹&ndash;&gt;
    <div class="JD_zuji">
      <div class="JD_jx_title">
        <div class="mt">
          <strong class="mt-title">我的足迹</strong>
          <a href="#">
            更多浏览记录
          </a>
        </div>
        <div class="mc">
          <ul>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/59e58a11Nc38676d5.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥2998.00</span>
                </strong>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/5a28acccN73689386.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥88.00</span>
                </strong>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/5a1690ddN441b5dce.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥199.00</span>
                </strong>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/5a02bde7N7d4453b1.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥799.00</span>
                </strong>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/5a122dbeN044ebf19.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥599.00</span>
                </strong>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/59c493a7N3f9b9c85.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥699.00</span>
                </strong>
              </div>
            </li>
            <li>
              <div class="mc_img">
                <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                  <img src="../gulimall/search/img/5a08f6f6N5bab2c1c.jpg" alt="">
                </a>
              </div>
              <div class="mc_price">
                <strong>
                  <span>￥715.00</span>
                </strong>
              </div>
            </li>
          </ul>


        </div>
      </div>
    </div>-->

    <div style="width: 1210px;margin: 0 auto;margin-bottom: 10px"><img src="../gulimall/search/img/5a33a2e0N9a04b4af.jpg" alt=""></div>


    <!--右侧侧边栏-->
    <div class="header_bar">
      <div class="header_bar_box">
        <ul>
          <li>
            <a href="#"><img src="../gulimall/search/img/wo.png"/></a>
            <div class="div">
              <a href="#">谷粒商城会员</a>
            </div>
          </li>
          <li>
            <a href="#"><img src="../gulimall/search/img/gouwuche.png"/></a>
            <div class="div">
              <a href="#">购物车</a>
            </div>
          </li>
          <li>
            <a href="#"><img src="../gulimall/search/img/taoxin.png"/></a>
            <div class="div">
              <a href="#">我的关注</a>
            </div>
          </li>

          <li>
            <a href="#"><img src="../gulimall/search/img/shi.png"/></a>
            <div class="div">
              <a href="#">我的足迹</a>
            </div>
          </li>
          <li>
            <a href="#"><img src="../gulimall/search/img/xinxi.png"/></a>
            <div class="div">
              <a href="#">我的消息</a>
            </div>
          </li>
          <li>
            <a href="#"><img src="../gulimall/search/img/qianbao.png"/></a>
            <div class="div">
              <a href="#">资讯JIMI</a>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <a href="#"><img src="../gulimall/search/img/fa3f24a70d38bd439261cb7439e517a5.png"/></a>
            <div class="div">
              <a href="#">顶部</a>
            </div>
          </li>
          <li>
            <a href="#"><img src="../gulimall/search/img/xinxi.png"/></a>
            <div class="div">
              <a href="#">反馈</a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <script>
        $(".sl_ext a:nth-child(1)").hover(function () {
            $(this).children("b").stop(true).animate({top: "3px"}, 50);
            $(this).children("i").stop(true).animate({top: "-23px"}, 50)
        }, function () {
            $(this).children("b").stop(true).animate({top: "24px"}, 50);
            $(this).children("i").stop(true).animate({top: "3px"}, 50)
        });
        $(".sl_ext a:nth-child(2)").hover(function () {
            $(this).children("span").stop(true).animate({top: "-1px"}, 100);
            $(this).children("i").stop(true).animate({top: "-14px"}, 100).css({display: "none"})
        }, function () {
            $(this).children("span").stop(true).animate({top: "14px"}, 100);
            $(this).children("i").stop(true).animate({top: "-1px"}, 100).css({display: "block"})
        });
        $('.tab_im img').hover(function () {
            var a = $(this).prop('src');
            var index = $(this).parents('li').index();
            $(this).parents('li').css('border', '2px solid red').siblings('li').css('border', '1px solid #ccc');
            $(this).parents('ul').prev().find('img').prop('src', a);
            $(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display', 'block').siblings('a').css('display', 'none');
            $(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display', 'block').siblings('span').css('display', 'none')
        });

        $(".JD_ipone_one").hover(function () {
            $(this).children("div").css({display: "block"})
        }, function () {
            $(this).children("div").css({display: "none"})
        });

        $("#tab>li").click(function () {
            var i = $(this).index();
            $("#container>div").hide().eq(i).show()
        });
        $(".dizhi_show").hover(function () {
            $(".dizhi_con").css({display: "block"})
        }, function () {
            $(".dizhi_con").css({display: "none"})
        });
        $(".dizhi_con").hover(function () {
            $(this).css({display: "block"})
        }, function () {
            $(this).css({display: "none"})
        });
        //显示隐藏
        var $li = $(".JD_nav_logo>div:gt(3)").hide();
        $('.JD_show span').click(function () {
            if ($li.is(':hidden')) {
                $li.show();
                $(this).css({width: "86px"}).text('收起 ^');
            } else {
                $li.hide();
                $('.JD_show span').css({width: "291px"}).text('更多选项（ CPU核数、网络、机身颜色 等）');
            }
            return false;
        });


        $(".rig_tab>div").hover(function () {
            var i = $(this).index();
            $(this).find('.ico').css({display: 'block'}).stop(true).animate({top: "190px"}, 300)
        }, function () {
            var i = $(this).index();
            $(this).find('.ico').css({display: 'none'}).stop(true).animate({top: "230px"})
        });

        $('.header_main_left>ul>li').hover(function () {
            $(this).css({
                background: "#f0f0f0"
            }).find('.header_main_left_main').stop(true).fadeIn(300)
        }, function () {
            $(this).css({
                background: "#fff"
            }).find(".header_main_left_a").css({
                color: "#000"
            });
            $(this).find('.header_main_left_main').stop(true).fadeOut(100)
        });
        $(".header_sj a").hover(function () {
            $(this).css({
                background: "#444"
            })
        }, function () {
            $(this).css({
                background: "#6e6568"
            })
        });


        $(".nav_li1 a").hover(function () {
            $(".header_main_left").stop(true).fadeIn()
        }, function () {
            $(".header_main_left").stop(true).fadeOut()
        });
        $(".header_main_left").hover(function () {
            $(this).stop(true).fadeIn()
        }, function () {
            $(this).stop(true).fadeOut()
        });


        //右侧侧边栏
        $(".header_bar_box ul li").hover(function () {
            $(this).css({
                background: "#7A6E6E"
            }).children(".div").css({
                display: "block"
            }).stop(true).animate({
                left: "-60px"
            }, 300)
        }, function () {
            $(this).css({
                background: "#7A6E6E"
            }).children(".div").css({
                display: "none"
            }).stop(true).animate({
                left: "0"
            }, 300)
        });


        //底部
        $(".footer_foot .p1 a").hover(function () {
            $(this).css("color", "#D70B1C")
        }, function () {
            $(this).css("color", "#727272")
        });

        $(".footer .footer_center ol li a").hover(function () {
            $(this).css("color", "#D70B1C")
        }, function () {
            $(this).css("color", "#727272")
        })


        function searchByKeyword() {
            location.href = replaceParamVal(location.href, "keyword", $("#keyword_input").val(), false)
        }


        function searchProducts(name, value, bool) {
            //原來的页面
            location.href = replaceParamVal(location.href, name, value, true)
        }

        $(".page_a").click(function () {
            var pn = $(this).attr("pn");
            var href = location.href;
            location.href = replaceParamVal(href, "pageNum", pn, false);

            return false;
        })

        function replaceParamVal(url, paramName, replaceVal, forceAdd) {
            var oUrl = url.toString();
            var nUrl;
            if (oUrl.indexOf(paramName) != -1) {
                if (forceAdd) {
                    if (oUrl.indexOf("?") != -1) {
                        nUrl = oUrl + "&" + paramName + "=" + replaceVal;
                    } else {
                        nUrl = oUrl + "?" + paramName + "=" + replaceVal;
                    }
                } else {
                    var re = eval('/(' + paramName + '=)([^&]*)/gi');
                    nUrl = oUrl.replace(re, paramName + '=' + replaceVal);
                }
            } else {
                if (oUrl.indexOf("?") != -1) {
                    nUrl = oUrl + "&" + paramName + "=" + replaceVal;
                } else {
                    nUrl = oUrl + "?" + paramName + "=" + replaceVal;
                }
            }
            return nUrl;
        };

        $(".sort_a").click(function () {
            changeStyle(this);
            let sort = $(this).attr("sort");
            sort = $(this).hasClass("desc") ? sort + "_desc" : sort + "_asc";
            location.href = replaceParamVal(location.href, "sort", sort, false);

            return false;
        });

        function changeStyle(ele) {
            // location.href = replaceParamVal(href, "pageNum", pn,flase);
            // color: #333; border-color: #ccc; background: #fff
            // color: #fff; border-color: #e4393c; background: #e4393c
            $(".sort_a").css({"color": "#333", "border-color": "#ccc", "background": "#fff"});
            $(".sort_a").each(function () {
                let text = $(this).text().replace("↓", "").replace("↑", "");
                $(this).text(text);
            })

            $(ele).css({"color": "#FFF", "border-color": "#e4393c", "background": "#e4393c"});
            $(ele).toggleClass("desc");

            if ($(ele).hasClass("desc")) {
                let text = $(ele).text().replace("↓", "").replace("↑", "");
                text = text + "↓";
                $(ele).text(text);
            } else {
                let text = $(ele).text().replace("↓", "").replace("↑", "");
                text = text + "↑";
                $(ele).text(text);
            }
        };


        $("#skuPriceSearchBtn").click(function () {
            let from = $(`#skuPriceFrom`).val();
            let to = $(`#skuPriceTo`).val();

            let query = from + "_" + to;
            location.href = replaceParamVal(location.href, "skuPrice", query, false);
        });


        $("#showHasStock").change(function () {
            // alert($(this).prop("checked"));
            if ($(this).prop("checked")) {
                location.href = replaceParamVal(location.href, "hasStock", 1, false);
            } else {
                let re = eval('/(hasStock=)([^&]*)/gi');
                location.href = (location.href + "").replace(re, "");
            }
            return false;
        });


    </script>
  </body>
</html>
